<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>

<body>
    <div id="app" class="demo">

    </div>

    <template id="main">
        <button @click="changeAdd">新增组件</button>
        <hr>

        <!-- 使用 component 动态组件标签，通过is属性来切换需要显示的组件 -->
        <component :is="cur_window.item_show" :my_obj_arr="obj_arr" :my_cur_window="cur_window">
            <h3>我是动态组件3</h3>
        </component>
    </template>

    <!-- 新增 -->
    <template id="add">
        姓名：<input type="text" v-model="name"><br>
        年龄：<input type="text" v-model="age" /><br>
        <button @click="sava_info()">保存</button>
    </template>
    <!-- 修改 -->
    <template id="updata">
        姓名：<input type="text" v-model="name"><br>
        年龄：<input type="text" v-model="age" /><br>
        <button @click="updata_info()">更新</button>
    </template>
    <!-- 查询 -->
    <template id="find">
        <table border="1px">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>操作</td>
            </tr>
            <tr v-for="obj in my_obj_arr">
                <td>{{obj.num}}</td>
                <td>{{obj.name}}</td>
                <td>{{obj.age}}</td>
                <td><button @click="del(obj.num)">删除数据</button>
                    <button @click="changeUpdata(obj.num)">修改数据</button>
                </td>
            </tr>
        </table>
    </template>
</body>
<script>
    let addConfig = {
        template: '#add',
        data() {
            return {
                name: '王二',
                age: 0
            }
        },
        props: {
            my_obj_arr: {
                type: Object,
                default: {}
            },
            my_cur_window: {
                type: Object,
                default: {}
            }
        },
        methods: {
            sava_info() {
                console.log(this.name, this.age)
                console.log(this.my_obj_arr);
                //添加数据到数组
                this.my_obj_arr.push({ "num": Math.floor(Math.random() * (1000 - 2 + 1)) + 2, "name": this.name, "age": this.age });
                //更换显示页面
                this.my_cur_window.item_show = 'find'
            }
        }
    }

    let updataConfig = {
        template: '#updata',
        data() {
            return {
                num: 0,
                name: '**',
                age: 0
            }
        },
        props: {
            my_obj_arr: {
                type: Object,
                default: {}
            },
            my_cur_window: {
                type: Object,
                default: {}
            }
        },
        //给组件触发事件
        mounted() {
            console.log("***************");
            console.log(this.my_cur_window.item_obj);
            let item = this.my_cur_window.item_obj;
            this.name = item.name;
            this.age = item.age;
            this.num = item.num;
        },
        methods: {
            updata_info() {
                //找到修改的id
                let item = this.my_cur_window.item_obj;
                console.log(item);
                //更新数组信息
                this.my_obj_arr.forEach(element => {
                    if (element.num === item.num) {
                        //从新赋值
                        element.name = this.name;
                        element.age = this.age;
                    }
                });
                //更新页面
                this.my_cur_window.item_show = 'find';
                console.log(this.my_obj_arr);
            }
        }
    }

    let findConfig = {
        template: '#find',
        props: {
            my_obj_arr: {
                type: Array,
                default: []
            },
            my_cur_window: {
                type: Object,
                default: {}
            }
        },
        methods: {
            del(index) {
                console.log(index);
                console.log(this.my_obj_arr);
                //数组中删除数据
                let indexToDelete = this.my_obj_arr.findIndex(item => item.num === index); // 找到对象的索引
                if (indexToDelete > -1) {
                    this.my_obj_arr.splice(indexToDelete, 1); // 从数组中删除
                }
            },
            changeUpdata(idx) {
                console.log(idx);
                //修改当前页面，并修改当前选中值
                this.my_cur_window.item_show = 'updata';
                this.my_obj_arr.forEach(ele=>{
                    if(idx === ele.num){
                        //找到点击的对象，传递给子组件
                        this.my_cur_window.item_obj = ele;
                    }
                });
            }
        }
    }

    const HelloVueApp = {
        template: '#main',
        data() {
            return {
                //数组信息
                'obj_arr': [
                    {
                        'num': 0, //学号为随机值
                        'name': '张三',
                        'age': 23
                    },
                    {
                        'num': 1,
                        'name': '李四',
                        'age': 25
                    }
                ],
                //当前显示界面/修改数据对象
                'cur_window': {
                    'item_show': 'find',
                    'item_obj': {}
                },
            }
        },
        components: {
            'add': addConfig,
            'updata': updataConfig,
            'find': findConfig,
        },
        methods: {
            changeAdd() {
                this.cur_window.item_show = 'add'
            }
        }
    }
    Vue.createApp(HelloVueApp).mount('#app')
</script>

</html>